<template>
  <div>
    <div class="main_label">
      <span>渠道统计<span>（{{channelTabText}}）</span></span>
    </div>
    <Tabs v-model="channelTabVal" :animated="false" type="line" name='channelTab'
      @on-click='changeTabs'>
      <TabPane :label="item.lable" :name="item.key" tab='channelTab' v-for="item in tabsData"
        :key="item.fieldName" />
      <template #extra>
        <span @click="checkChart('3')" class="check_chart" v-if="hasShow">
          <Icon type="md-stats" />查看完整图表</span>
        <span @click="changeMode('-1')" class="check_chart" v-else>立即维护</span>
      </template>
    </Tabs>
    <div style="height: 250px">
      <chart-block ref="channelCharts"></chart-block>
    </div>
  </div>
</template>

<script>
  import chartBlock from '@/components/echarts/eChartsBlock.vue'
  import chartsOption from '@/biz/buildingHome/charOption'
  import dailyChartsApi from '@/biz/buildingHome/dailyCharts'
  import dailyApi from '@/biz/buildingHome/home'

  export default {
    components: {
      chartBlock
    },
    data() {
      return {
        channelTabVal: '',
        tabsData: [],
        hasShow: false,
        odlTabVal: ''
      }
    },
    computed: {
      channelTabText() {
        let text = ''
        this.tabsData.forEach(item => {
          if (item.key == this.channelTabVal) {
            console.log(item.lable, this.channelTabVal, '11111222')
            text = item.lable
          }
        })
        return text
      }
    },
    methods: {
      checkChart(type) {
        console.log(type)
        this.$emit('handelClick', { type })
      },

      changeMode(type) {
        this.$emit('changeMode', type)
      },
      changeTabs(val) {
        if (this.odlTabVal == val) return false
        this.odlTabVal = val
        this.getinfoData(this.infoData)
      },
      getinfoData(data) {
        this.$refs.channelCharts.showLoading()
        let option = null
        this.infoData = data
        this.hasShow = data.templateAllList[2].hasShow


        // this.channelTabVal = this.channelTabVal ? this.channelTabVal : data.templateAllList[2]
        //   .childModelConfig[0].dailyConfigShortName
        // this.odlTabVal = this.channelTabVal
        // this.tabsData = data.templateAllList[2].childModelConfig.filter(item => {
        //   return item.hasLock
        // })
        // this.TabVal = this.chartTabs[2].list.length ? this.chartTabs[2].list[0].key : '1'

        // 获取渠道统计tab list
        let tmpList = data.templateAllList[2].childModelConfig.filter((item, index) => {
          item.lable = `${item.dailyConfigShortName}`
          item.key = index + 1 + ''
          return item.hasLock
        });
        this.tabsData = tmpList
        if (!this.channelTabVal) {
          this.channelTabVal = this.tabsData.length ? this.tabsData[0].key : '1'
        }
        if (!this.hasShow) {
          let text = dailyChartsApi.noDataTxt(2)
          option = chartsOption.noData(text)
          this.$refs.channelCharts.setOption(option)
        } else {
          let params = {
            type: 'optionBar',
            checkTime: dailyApi.resovleTime(5, data.currentDate),
            chartsType: '3',
            TabVal: this.channelTabVal,
            unit: this.channelTabVal == 4 || this.channelTabVal == 5 ? '套' : '组',
            page_type: 'list'
          }
          dailyChartsApi.getInfoData(params).then((res) => {
            option = res.option
            this.$refs.channelCharts.setOption(option)
          })
        }
      }
    }
  }
</script>
<style lang='scss' scoped>
  .main_label {
    display: flex;
    justify-content: space-between;
    line-height: 20px;
    border-left: 5px solid #2b85e4;
    padding-left: 8px;
    font-size: 15px;
    margin-bottom: 15px;

    .delete_btn {
      color: #2d8cf0;
      cursor: pointer;
      margin-right: 10px;
      font-size: 13px;
    }
  }

  .check_chart {
    line-height: 36px;
    color: #2b85e4;
    margin-right: 20px;
    cursor: pointer;
  }
</style>